<template>
  <div class="sign">
    <div class="image">
      <img
        class="imgs"
        src="https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019pILfAg7Avr1567732916.png"
      />
    </div>
    <CellGroup class="cgp">
      <Field class="inp" v-model="phone" placeholder="请输入手机号" />
      <Field class="inp" v-model="password" placeholder="请输入密码" />
    </CellGroup>
    <div class="other">
      <span @click="goBackPwd">找回密码</span>
      <span @click="goLoginyzm">注册/验证码登录</span>
    </div>
    <div class="login">
      <Button type="primary" color="orange" class="btn" block @click="toLogin">登录</Button>
    </div>
    <Drag />
  </div>
</template>

<script>
import { Field, CellGroup, Button } from "vant";
import { goLogin } from "../../https/https";
import Drag from "../../components/Drag";
export default {
  components: {
    Field,
    CellGroup,
    Drag,
    Button,
  },
  data() {
    return {
      password: "",
      phone: "",
    };
  },
  methods: {
    goLoginyzm() {//去验证码登陆页面
      this.$router.push("/Loginyzm");
    },
    goBackPwd() {},//找回密码
    toLogin() {
      var obj = {
        mobile: this.phone,
        password: this.password,
        type: 1,
      };
      console.log(obj)
      goLogin(obj).then((res) => {
        console.log(res);
        localStorage.setItem("token", res.remember_token);
        localStorage.setItem("obj", JSON.stringify(res));
        if (localStorage.getItem("token")) {
          this.$router.push("/main");
        }
      });
    },
  },
};
</script>

<style scoped>
.image {
  width: 100%;
  height: 100%;
  display: flex;
  justify-items: center;
  padding: 50px 0;
}
.imgs {
  width: 65%;
  margin: 0 auto;
}
.cgp {
  width: 80%;
  margin: 10px auto;
}
.inp {
  border-bottom: 1px solid #999;
}
.other {
  width: 80%;
  margin: 0 auto;
  color: #999;
  font-size: 10px;
  display: flex;
  justify-content: space-between;
}
.login {
  width: 80%;
  margin: 80px auto;
  padding-bottom: 200px;
}
.btn {
  border-radius: 10px;
}
</style>